import { message } from "antd"
import { Copy, Check } from "lucide-react"
import React, { useState } from "react"

const CopyButton: React.FC<{ id: string }> = ({ id }) => {
  const [copied, setCopited] = useState(false)

  const onCopy = async () => {
    try {
      setCopited(true)
      const text = document.getElementById(id)!.innerText
      await navigator.clipboard.writeText(text)
      message.success('复制成功')
      setTimeout(() => {
        setCopited(false)
      }, 3000)
    } catch (error) {
      console.log(error)
      message.error('复制失败')
    }
  }

  return (
    <button
      onClick={onCopy}
      // 亮色
      // className="inline-flex relative rounded-md px-2 py-1 hover:bg-gray-200"
      // 暗色
      className="inline-flex relative rounded-md px-2 py-1 hover:bg-gray-800"
    >
      <Copy
        size={16}
        className={`transition-all
        ${copied ? "scale-0" : "scale-100"}
      `}
      />
      <Check
        size={16}
        className={`absolute transition-all ${copied ? "scale-100" : "scale-0"
          }`}
      />
    </button>
  )
}

export default CopyButton